<template>
	<div class="organization-detail">
		<div class="title">医疗机构详情&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp


			<spen @click="back">
				&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
				返回上一页</spen>
		</div>

		<div class="card">
			<div class="org-name">{{ dataInfo.orgName }}</div>
			<div class="org-address">地址：{{ dataInfo.orgAddress }}</div>
			<div class="legal-person">法人：{{ dataInfo.legalPerson }}</div>
		</div>
		<div class="card">
			<SubTitle title="基本信息"></SubTitle>
			<div class="row">医院名称：{{ dataInfo.orgName }}</div>
			<div class="row">医院简介：</div>
			<div class="row">{{ dataInfo.description }}</div>
			<div class="org-detail-info">
				<div class="info-item" v-for="item in dataInfo.detailInfo">
					<div class="label">{{ item.label }}：</div>
					<div class="value">{{ item.value }}</div>
				</div>
			</div>
		</div>
		<div class="card">
			<SubTitle title="科室监控"></SubTitle>
			<!-- <div class="medical-subject" @click="openC('52030000012008000001')">外科</div> -->
			<div class="medical-subject" v-if="!department || department.length === 0">没有设备</div>
      <div class="medical-subject" v-for="item in department" :key="item.departmentCode"
      @click="openC(item.deviceId,item.departmentCode)">
      {{ item.departmentName }}</div>
		</div>
		<div class="card">
			<SubTitle title="诊疗科目"></SubTitle>
			<div class="medical-subject" v-for="item in dataInfo.medicalSubject" :key="item">{{ item }}</div>
		</div>
		<div class="card">
			<SubTitle title="技术资质"></SubTitle>
			<div class="tech-qualification-container">
				<div class="item" v-for="item in dataInfo.qualification" :key="item.label">
					{{ item.label }}：{{ item.value }}
				</div>
			</div>
		</div>
		<div class="card">
			<SubTitle title="医师列表"></SubTitle>
			<div class="table">
				<el-table :data="tableData" border fit style="width: 100%" header-cell-class-name="table-header-cell">
					<el-table-column label="序号" type="index" width="80">
					</el-table-column>
					<el-table-column label="医生姓名" align="center" prop="name" />
					<el-table-column label="医师类别" align="center" prop="parcticeclass" />
					<el-table-column label="任职资格" align="center" prop="workcpet" />
					<el-table-column label="执业范围" align="center" prop="parcticescope" />
					<el-table-column label="主要执业机构" align="center" prop="unit" />
					<el-table-column label="美容专业" align="center" prop="beautyMajor" />
					<el-table-column label="技术资质" align="center" prop="technicalQualification" />
					<el-table-column label="精麻处方权" align="center" prop="anesthetist" />
					<el-table-column label="操作">
						<template slot-scope="scope">
							<div class="operation">
								<div @click="handleView(scope)">查看</div>
							</div>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<pagination v-show="doctotal>0" :total="doctotal" :page.sync="queryParams.pageNum"
				:limit.sync="queryParams.pageSize" @pagination="getDockorList" />
		</div>
		<div class="card">
			<SubTitle title="护士列表"></SubTitle>
			<div class="table">
				<el-table :data="nurseData" border fit style="width: 100%" header-cell-class-name="table-header-cell">
					<el-table-column label="序号" type="index" width="80">
					</el-table-column>
					<el-table-column label="护士姓名" align="center" prop="name" />
					<el-table-column label="机构名称" align="center" prop="institutionName" />
					<el-table-column label="性别" align="center" prop="sex" />
					<el-table-column label="学历" align="center" prop="antecedent" />
					<el-table-column label="身份证号" align="center" prop="idCard" />
					<el-table-column label="执业证号" align="center" prop="nurselicence" />
					<el-table-column label="电话号码" align="center" prop="phone" />
					<el-table-column label="操作">
						<template slot-scope="scope">
							<div class="operation">
								<div @click="handleView2(scope)">查看</div>
							</div>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<pagination v-show="nurtotal>0" :total="nurtotal" :page.sync="nurqueryParams.pageNum"
				:limit.sync="nurqueryParams.pageSize" @pagination="getNurseList" />
		</div>
		<camera ref='camera'></camera>
	</div>
</template>
<script>
	import camera from '@/components/Camera/camera.vue'
	import SubTitle from '@/components/sub-title/index.vue'
	import {
		listNation,
		getNation,
		delNation,
		addNation,
		updateNation,
		exportNation
	} from "@/api/system/nation";
	import {
		listDockor
	} from "@/api/his/dockor";
	import {
		getAll,
		listTowHos,
    getDeviceId,
    getDepartmentInfo
	} from "@/api/his/all";
	import {
		listAll,
		DocTowlist
	} from "@/api/his/doctorAll";
	import {
		listNurse,
		nurTowlist
	} from "@/api/his/nurse";
	export default {
		name: 'OrganizationDetail',
		components: {
			SubTitle,
			camera
		},
		data() {
			return {
				url: 'http://localhost:8081/#/channelList/52030000012008000001/0',
				// 监控弹窗
				open: false,
				// 总条数
				doctotal: 0,
				nurtotal: 0,
				// 查询参数
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					registerNumber: '',
					signature: '',
					hospitalId: ''
				},
				nurqueryParams: {
					pageNum: 1,
					pageSize: 10,
					registerNumber: '',
					signature: '',
					hospitalId: ''
				},
				dataInfo: {
					orgName: '',
					orgAddress: '',
					legalPerson: '',
					description: '',

					medicalSubject: [],
					qualification: [

					],
					detailInfo: [

					],
				},
				tableConfig: [{
						field: 'order',
						title: '序号',
					},
					{
						field: 'physicianName',
						title: '医师名称',
					},
					{
						field: 'physicianType',
						title: '医师类别',
					},
					{
						field: 'physicianQualification',
						title: '任职资格',
					},
					{
						field: 'practiceScope',
						title: '执业范围',
					},
					{
						field: 'beautyMajor',
						title: '美容专业',
					},
					{
						field: 'technicalQualification',
						title: '技术资质',
					},
					{
						field: 'primaryPracticeOrg',
						title: '主要执业机构',
					},
					{
						field: 'anesthetist',
						title: '精麻处方权',
					}
				],
				tableData: [],
				nurseData: [],
        deviceId: '',
        department: {},
        devquery: {
          signature: '',
          hospitalId: '',
          channelId: '',
        },
				warningTableConfig: [{
						field: 'order',
						title: '序号',
					},
					{
						field: 'rule',
						title: '预警规则',
					},
					{
						field: 'content',
						title: '预警内容',
					},
				],
				warningTableData: [{
						order: 1,
						rule: '抗菌药物处方权规则',
						content: '“吴俊“的抗菌药物处方权为“无抗菌药物权限”'
					},
					{
						order: 2,
						rule: '药品/项目名称药物规则',
						content: '(4+7国基)头孢呋辛酯片”为非限制使用级抗菌药物'
					}
				],

			}
		},
		created() {
			// console.log(this.$route.params)
			const hos = this.$route.params.number;
			const number = this.$route.params.number.registerNumber;
      // this.getDevId(hos);
      this.getDepartment(hos);
			if (hos) {
				this.getList(hos);
			}
		},
		methods: {
      //获取设备id
      // getDevId(hos){
      //   this.devquery.signature = hos.signature;
      //   this.devquery.hospitalId = hos.hospitalId;
      //   getDeviceId(this.devquery).then(response => {
      //     this.deviceId = response.data.row.deviceId
      //   });
      // },
      //获取科室监控
      getDepartment(hos){
        this.devquery.signature = hos.signature;
        this.devquery.hospitalId = hos.hospitalId;
        getDepartmentInfo(this.devquery).then(response => {
            this.department = response
            // alert(JSON.stringify(this.department[0]))
        });
      },
			openC(deviceId,departmentCode) {
        let firstDeviceId = deviceId;
              if (deviceId && deviceId.includes(',')) {
                firstDeviceId = deviceId.split(',')[0];
              }
        let channelId = firstDeviceId
        if(channelId !== null) {
        getDeviceId(channelId).then(response => {
         // alert(response.data)
         this.$refs.camera.openC(response.data,departmentCode)
        });
        }
			},
			close(id) {
				this.$refs.camera.close()
			},
			handleView(scope) {
				this.$router.push({
					name: 'physicianDetail',
					params: {
						number: scope.row.id,
						registerNumber: scope.row.registerNumber
					}
				});
			},
			handleView2(scope) {
				this.$router.push({
					name: 'nurseDetail',
					params: {
						number: scope.row.id,
						hos: this.$route.params.number
					}
				});
			},
			back() {
				this.$router.push({
					name: 'organization'
				});
			},
			getList(hos) {
				this.queryParams.hospitalId = hos.hospitalId;
				this.nurqueryParams.hospitalId = hos.hospitalId;
				this.queryParams.signature = hos.signature;
				this.nurqueryParams.signature = hos.signature;
				this.queryParams.registerNumber = hos.registerNumber;
				this.nurqueryParams.registerNumber = hos.registerNumber;
				listTowHos(this.queryParams).then(response => {
					console.log(response)
					let firstRow = response.rows[0];
          this.devquery.signature = firstRow.signature;
          this.devquery.hospitalId = firstRow.hospitalId;
					this.dataInfo.orgName = firstRow.institutionName;
					this.dataInfo.orgAddress = firstRow.medicalAddress;
					this.dataInfo.legalPerson = firstRow.medicalLegalrepresentative;
					this.dataInfo.description = '';
					for (let i = 0; i < firstRow.medicalSpecialtiesName.split("/").length; i++) {
						this.dataInfo.medicalSubject.push(firstRow.medicalSpecialtiesName.split("/")[i])
					}
					this.dataInfo.detailInfo = [{
								label: '统一社会信用代码',
								value: firstRow.medicalUscc
							},
							{
								label: '所有制形式',
								value: firstRow.medicalOwnership
							},
							{
								label: '是否有放射所有权',
								value: ''
							},
							{
								label: '登记号',
								value: firstRow.registerNumber
							},
							{
								label: '机构属性',
								value: firstRow.medicalCategory
							},
							{
								label: '放射诊疗许可证',
								value: ''
							},
							{
								label: '全国唯一识别码',
								value: firstRow.uniqueCode
							}
						],
						this.getDockorList()
					this.getNurseList()
				});
			},
			getDockorList() {
				DocTowlist(this.queryParams).then(response => {
					this.tableData = response.rows;
					// this.doctotal = 20;
					this.doctotal = response.total;
				});
			},
			getNurseList() {
				nurTowlist(this.nurqueryParams).then(response => {
					this.nurseData = response.rows;
					this.nurtotal = response.total;
				});
			},
		}
	}
</script>
<style scoped lang="scss">
	.organization-detail {
		height: 100%;
		display: flex;
		flex-direction: column;
		cursor: default;

		.title {
			margin-top: 10px;
			font-weight: bold;
			font-size: 26px;
			line-height: 26px;
			color: #4B4B4B;
		}

		.org-name {
			font-weight: bold;
			font-size: 20px;
			color: #4B4B4B;
			line-height: 39px;
		}

		.org-address,
		.legal-person {
			font-weight: 500;
			font-size: 16px;
			color: #4B4B4B;
			line-height: 30px;
		}

		.row {
			font-weight: 500;
			font-size: 16px;
			color: #4B4B4B;
			line-height: 25px;
			margin-top: 6px;
		}

		.org-detail-info {
			display: flex;
			flex-wrap: wrap;

			.info-item {
				width: 530px;
				display: flex;
				align-items: center;
				margin-top: 8px;
				font-weight: 500;
				font-size: 16px;
				color: #8B8B8B;

				.label {
					white-space: nowrap;
					width: 133px;
				}
			}
		}

		.medical-subject {
			margin-top: 24px;
			border-radius: 5px;
			border: 1px solid #DCDCDC;
			text-align: center;
			height: 39px;
			line-height: 39px;
			font-weight: 500;
			font-size: 16px;
			color: #505050;
			padding: 0 30px;
			display: inline-block;
			margin-right: 13px;
		}

		.tech-qualification-container {
			display: flex;
			flex-wrap: wrap;
			margin-top: 20px;

			.item {
				font-weight: 500;
				font-size: 16px;
				color: #8B8B8B;
				margin-right: 120px;
			}

		}
	}

	.card {
		background-color: #fff;
		padding: 19px 13px 19px;
		margin-top: 14px;
	}

	.flex-1 {
		flex: 1;
	}

	.table {
		flex: 1;
		background-color: #fff;
		margin: 13px 0 16px;

		::v-deep .table-header-cell {
			background-color: #EBEFF8;
			padding-left: 21px;
			font-weight: 500;
			font-size: 16px;
			color: #414141;
		}

		.el-table {
			height: 100%;
		}

		::v-deep .el-table__cell {
			padding-left: 21px;
			font-weight: 500;
			font-size: 16px;
			color: #414141;
		}

		:v-deep .el-table__body-wrapper {
			height: 100%;
		}

		:v-deep .el-table__empty-block {
			height: 100%;
		}

	}

	.operation {
		display: flex;
		align-items: center;
		height: 100%;

		.view {
			cursor: pointer;
			font-weight: 500;
			font-size: 16px;
			color: #4373F1;
			height: 16px;
			line-height: 16px;
			background-repeat: no-repeat;
			background-position: 0 center;
			user-select: none;
			padding-left: 20px;
		}

		.view {
			background-image: url('~@/assets/images/table/view.png');
		}
	}
</style>
